<script setup lang="ts">
// 第一步：导入组件
import * as e from 'echarts'
import { onMounted } from 'vue'

//声明周期函数
onMounted(() => {
    // 第二步：定义一个容器，用于存放图表
    // 第三步：初始化
    let chart = e.init(document.getElementById("div_echart"))
    // 第四步：配置图表
    // Option:配置项
    chart.setOption({
        textStyle: {
            color: "#fff"
        },

        // 图表标题设置
        title: {
            // 是否显示标题
            show: true,
            // 文本
            text: "商品销量",
            // 标题文字的样式
            textStyle: {
                color: "#ffffff",
                fontSize: 22
            },
        },
        // 图例：代表线条或者柱状图，或者饼图某个区域表示的含义。
        legend: {
            // 是否显示
            show: false,
            // 类型
            type: "plain",
            // 位置偏移设定
            top: "auto",
            right: "auto",
            left: "auto",
            bottom: "auto"
        },
        // x轴
        xAxis: {
            show: true,
            position: "bottom",
            //普通类目轴
            type: "category",
            // min: 0,
            // max: 10000
            // 类目轴显示的项，一般在类目轴上  type: "category",
            data: ["皮衣", "羊毛衫", "羽绒服", "内衣"],
            axisLabel: {
                color: "#fff",
                fontSize: 22
            }
        },
        // y轴
        yAxis: {
            show: true,
            position: "left",
            //普通类目轴
            type: "value",
            // min: 0,
            // max: 10000
            axisLabel: {
                color: "#fff",
                fontSize: 22
            }
        },
        //数据项,核心配置
        series: [{
            // 图表类型，折线，柱状，饼图
            type: "bar",
            // 节点文本
            lable: {},
            // 行数据/节点数据
            data: [
                50, 186, 150, 132
            ]
        }],

        // 数据项,核心配置
        // series: {
        //     // 图表类型，折线，柱状，饼图
        //     type: "bar",
        //     // 节点文本
        //     lable: {},
        //     // 行数据/节点数据
        //     data: [
        //         [1, 2, 3, 4],
        //         [11, 12, 12, 7],
        //         [22, 12, 7, 21]
        //     ]
        // },
        color: ["#16baaa", "#16b777", "#1e9fff", "#ff5722"],


    })
})

// 题外：
// $ 符号是JQuery的缩写
// $("#div_echart") 等同于 JQuery("#div_echart")
</script>

<template>
    <div id="div_echart">

    </div>
</template>

<style scoped></style>